<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>ICE HOCKEY MANAGER - Home Page</title>
            <style type="text/css">
                html,body {
                    margin: 0px;
                    padding: 0px;
                    border: 0px;
                    font-family: "Arial CE", "Helvetica CE";
                    font-size: 1.0em;
                }

                #head {
                    margin: 0px; padding: 0px; border: 0px;
                    background-color: rgb(1,53,254);
                    height: 133px;
                    text-align: center;
                    background-image: url("http://kolemaim.sourceforge.net/mediawiki-1.15.3/images/f/f3/Player.jpg");
                    background-repeat : no-repeat;
                    background-position: top left;
                    color: white;
                }

                #top-panel {
                    border: 0px;
                    border-top: 2px solid gray;
                    margin:0px;
                    border-bottom: 2px solid gray;
                    font-size: 0.8em;
                    height: 4ex;
                    background: black;
                }

                h1 {
                    margin: 0px; padding: 0px; border: 0px;
                    font-size:400%;
                    padding-top: 30px;
                }

                h2 {
                    font-size: 130%;
                }

                form {
                    background-color: rgb(1,53,254);
                    border: 2px solid black;
                    color: white;
                    margin: 10px;
                    padding:10px;
                }

                #forms {
                    float: left;
                }

                #welcomeMessage {
    margin: 0px 0px 0px 360px; padding: 0px; border: 0px;
}
            </style>
        </head>
        <body>

            <div id="head">
                <h1><h:outputText value="Ice Hockey Manager"/></h1>
            </div>

            <div id="top-panel">
            </div>

            <div id="forms">
            <form action="j_security_check" method="post" style="width: 230px;">
                <h2><h:outputText value="#{msgs.logging_in}"/></h2>
                <h:panelGrid columns="2">
                <h:outputText value="#{msgs.login}" />
                <input type="text" name="j_username" />
                <h:outputText value="#{msgs.password}" />
                <input type="password" name="j_password" />
                </h:panelGrid>
                <input type="submit" value="Login" />
            </form>

            <h:form prependId="false" style="width: 300px;">
                <h2><h:outputText value="#{msgs.register}"/></h2>

                <h:panelGrid columns="2">
                    <h:outputText value="#{msgs.login}" />
                    <h:inputText id="birth" value="#{createUser.login}" required="true" requiredMessage="#{msgs.login_required}">
                        <f:validator validatorId="LoginValidator"/>
                    </h:inputText>
                    <h:outputText value="#{msgs.password}" />
                    <h:inputSecret value="#{createUser.password}" required="true" requiredMessage="#{msgs.password_required}">
                        <f:validator validatorId="PasswordValidator"/>
                    </h:inputSecret>
                    <h:outputText value="#{msgs.password_again}" />
                    <h:inputSecret value="#{createUser.password2}" required="true" requiredMessage="#{msgs.password_required}" />
                </h:panelGrid>
                <h:commandButton action="#{createUser.createManager}" value="Create Account"/>
            </h:form>
                <h:messages />
                </div>
                <div id="welcomeMessage">
                    <h2><h:outputText value="#{msgs.welcome_title}" /></h2>
                    <p><h:outputText value="#{msgs.welcome_text}" /></p>
                    <p><h:outputText value="#{msgs.shorts_announc}" /></p>
                    <b><h:outputText value="#{msgs.pos}" /></b> - <h:outputText value="#{msgs.pos_in_form}" /><br />
                    <b><h:outputText value="#{msgs.post}" /></b> - <h:outputText value="#{msgs.fav_pos}" /><br />
                    <b><h:outputText value="#{msgs.goa}" /></b> - <h:outputText value="#{msgs.golman_skills}" /><br />
                    <b><h:outputText value="#{msgs.tec}" /></b> - <h:outputText value="#{msgs.tech_skills}" /><br />
                    <b><h:outputText value="#{msgs.str}" /></b> - <h:outputText value="#{msgs.strength_s}" /><br />
                    <b><h:outputText value="#{msgs.spe}" /></b> - <h:outputText value="#{msgs.speed_s}" /><br />
                    <b><h:outputText value="#{msgs.sho}" /></b> - <h:outputText value="#{msgs.shot_s}" /><br />
                    <br />
                    <b>GT</b> - <h:outputText value="#{msgs.golman_pos}" /><br />
                    <b>CE</b> - <h:outputText value="#{msgs.center_pos}" /><br />
                    <b>LW</b> - <h:outputText value="#{msgs.leftw_pos}" /><br />
                    <b>RW</b> - <h:outputText value="#{msgs.rightw_pos}" /><br />
                    <b>LD</b> - <h:outputText value="#{msgs.leftd_pos}" /><br />
                    <b>RD</b> - <h:outputText value="#{msgs.rightd_pos}" /><br />
                </div>
                <div style="clear: both;" />
        </body>
    </html>
</f:view>

